<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem :to="module"><Icon type="md-apps" /> {{title}}列表</BreadcrumbItem>
                <BreadcrumbItem>{{title}}分类</BreadcrumbItem>
            </Breadcrumb>
        </div>
            
        <div style="text-align:right;">
            <Button type="primary" icon="md-add" @click="add(0, 1)">添加一级分类</Button>
        </div>

        <Card style="margin-top:20px;">
            <Table :columns="columns" :loading="loading" :data="tableData" stripe border highlight-row></Table>
        </Card>

        <Modal
            v-model="dialogShow"
            :title="dialogTitle"
            :mask-closable="false"
            :loading="ModelLoading"
        >
            <Form ref="form" :model="form" :label-width="100" :rules="rules">
                <FormItem label="分类名称：" prop="title">
                    <Input autofocus v-model="form.title" placeholder="请输入分类名称"></Input>
                </FormItem>
                <FormItem label="分类长名称：" prop="long_title">
                    <Input v-model="form.long_title" placeholder="分类长名称"></Input>
                </FormItem>
                <FormItem label="备注：" prop="remark">
                    <Input type="textarea" v-model="form.remark" placeholder="备注"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="save">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        props: ['title', 'module'],
        data() {
            return {
                url: pub.apiDomain + 'cate',
                dialogShow: false,
                dialogTitle: '',
                loading: true,
                ModelLoading: true,
                form:{},    //编辑信息
                tableData: [],
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                    rules: {
                        title: [
                            {required: true, message: '请输入分类名称', trigger: 'blur'}
                        ],
                    },
                columns: [
                    {title: 'id', key: 'id', width:200},
                    {title: '分类名称', key: 'title', render: this.cateFilter},
                    {
                        title: '操作',
                        width: 450,
                        key: 'action',
                        render: (h, params) => {
                            return <span>
                                <i-button type="primary" icon="ios-create-outline" style="margin-right:6px;" onClick={(e)=>{this.handleEdit(params.index, params.row)}}>编辑</i-button>
                                <i-button type="error" icon="md-trash" style="margin-right:6px;" onClick={(e)=>{this.remove(params.index, params.row.id)}}>删除</i-button>
                                {this.module != 'special' ? <i-button type="success" icon="md-build" style="margin-right:6px;" onClick={(e)=>{this.$router.push('/cate_custom/'+params.row.id)}}>自定义字段</i-button> : ''} 
                                {params.row.lv < 3 ? <i-button type="primary" icon="md-add" onClick={(e)=>{this.add(params.row.id, params.row.lv * 1 + 1)}}>添加子类</i-button> : ''} 
                            </span>
                        }
                    }
                ],
            }
        },
        mounted(){
            //接收站点变更事件
            this.bus.$on('change_site', () => {
                this.getData();
            });
        },
        created(){
            this.getData();   //由于设置了默认排序,有排序字段会自动触发sortChange操作加载列表
        },
        methods: {
            //添加
            add(pid, lv){
                this.dialogShow = true;
                this.dialogTitle = '添加分类';
                this.form = {pid: pid, lv: lv, module: this.module, site:pub.getCache('site')};
            },
            //加载内容：在翻页或搜索后
            getData(){
                this.$axios.post(this.url + '/ls/module/'+this.module).then(res => {
                    this.tableData = res.d;
                    this.loading = false;
                    this.$refs['form'].resetFields();
                });
            },
            //编辑
            handleEdit(index, row) {
                this.dialogShow = true;
                this.dialogTitle = '编辑分类';
                this.form = row;
            },
            cancel(){
                this.dialogShow = false;
                this.getData();
            },
            //删除
            remove(i, id) {
                if(this.tableData[i].has_sub) {
                    return this.$Message.error('有子类，不可删除');
                }
                if(!confirm('确定删除吗？')) return false;
                this.$axios.get(this.url + '/del/id/' + id).then(res => {
                    this.$Message.success('删除成功');
                    this.getData();
                });
            },
            //分类名称，2，3级加上前辍
            cateFilter(h, params){
                var title = params.row.title;
                if(params.row.lv == 2) {
                    title = '　├　' + title;
                }
                    if(params.row.lv == 3) {
                    title = '　　　├　' + title;
                }
                return <span>{title}</span>
            },
            //提交表单
            save() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.dialogShow = false;
                            this.getData();
                        })
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>